import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Button, Divider, Modal, Menu } from 'antd';
import { Link } from 'umi';
import TableList from '@/components/TableList';
import FilterSearch from '@/components/FilterSearch';
import EditModal from '@/components/EditModal';
import styles from './index.less';
const { confirm } = Modal;
type Props = {
  dispatch?: Function;
};

@connect(({ user }: any) => ({ user }))
class Manager<Props> extends PureComponent {
  state = {
    loading: false,
    listFlow: [],
    checkFlow: 0,
  };
  table = { fetch: () => {} };
  modal = { show: () => {} };
  modalShow = () => {};

  editFilters = [
    {
      key: 'name',
      type: 'input',
      label: '节点名称',
      rules: [
        {
          required: true,
        },
      ],
      placeholder: '请输入节点名称',
    },
    {
      key: 'departmentUuid',
      type: 'select',
      label: '所属部门',
      // mode: 'multiple',
      asyncopt: {
        url: '/api/structure/v1/queryDepartment',
      },
      rules: [
        {
          required: true,
          message: '请选择部门',
        },
      ],
      placeholder: '请选择部门',
    },
    {
      key: 'jobUuid',
      type: 'select',
      label: '岗位',
      // mode: 'multiple',
      asyncopt: {
        url: '/api/job/v1/query',
      },
      rules: [
        {
          required: true,
          message: '请选择岗位',
        },
      ],
      placeholder: '请选择岗位',
    },
  ];

  columns = [
    { title: '序号', dataIndex: 'sort', render: text => text + 1 },
    { title: '节点名称', dataIndex: 'name' },
    {
      title: '审批人员岗位',
      dataIndex: 'approverType',
      render: (text, data) => {
        return data.pointApproveList
          .map(item => `${item.departmentName}--${item.jobName}岗`)
          .join('； ');
      },
    },

    {
      title: '操作',
      dataIndex: 'action', // 状态：是否锁定0：未锁定1：已锁定
      width: 325,
      render: (text: any, data: object) => (
        <span key={text}>
          <Button onClick={() => this.modalShow(data)}>编辑</Button>
          <Divider type="vertical" />
          <Button onClick={() => this.deleteUser(data)}>删除</Button>
        </span>
      ),
    },
  ];

  componentWillMount() {
    this.props
      .dispatch({
        type: '$request/post',
        payload: {
          url: '/api/approve/v1/listFlow',
        },
      })
      .then(listFlow => {
        this.setState({
          listFlow,
          checkFlow: listFlow[0].uuid,
        });
        this.table.fetch({
          uuid: listFlow[0].uuid,
        });
      });
  }

  /**
   * 删除用户
   * @param data
   */
  deleteUser(data) {
    this.props
      .dispatch({
        type: 'base/delete',
        payload: {
          url: '/api/approve/v1/delPoint',
          type: '节点',
          data,
        },
      })
      .then(res => {
        this.table.fetch();
      });
  }

  changeFlow(uuid) {
    this.setState({
      checkFlow: uuid,
    });
    this.table.fetch({
      uuid: uuid,
    });
  }
  /**
   * 数据预处理
   * @param data
   * @returns
   */
  preproccess(data) {
    const { checkFlow } = this.state;
    const params = {
      ...data,
      flowUuid: checkFlow,
      pointApproveList: [
        {
          departmentUuid: data.departmentUuid,
          jobUuid: data.jobUuid,
        },
      ],
    };
    return params;
  }

  render() {
    const { listFlow, checkFlow } = this.state;
    return (
      <div className={styles.container}>
        <div className={styles.menu}>
          <Menu
            style={{ width: 180, background: 'transparent' }}
            defaultSelectedKeys={['home']}
            defaultOpenKeys={['sub1']}
          >
            {listFlow &&
              listFlow.map(item => (
                <Menu.Item
                  className={item.uuid == checkFlow ? styles.checked : ''}
                  onClick={() => this.changeFlow(item.uuid)}
                >
                  {item.name}
                </Menu.Item>
              ))}
          </Menu>
        </div>
        <div className={styles.content}>
          <Button onClick={() => this.modalShow()}>添加审批节点</Button>
          <TableList
            post
            autoFetch={false}
            rowKey="id"
            onRef={c => {
              this.table = c;
            }}
            columns={this.columns}
            source="/api/approve/v1/listPoint"
          />
          <EditModal
            title="节点编辑"
            filters={this.editFilters}
            onShow={v => (this.modalShow = v)}
            onSave={() => this.table.fetch({ flowUuid: checkFlow })}
            preproccess={data => this.preproccess(data)}
            createUrl="/api/approve/v1/createPoint"
            updateUrl="/api/approve/v1/updatePoint"
          />
        </div>
      </div>
    );
  }
}

export default Manager;
